<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>尺寸问题</title>
		<style>
			/*1+100  取值：选择器被选中几率增加*/
			di v#d1{
				width: 50%;
				height: 500px;
				/*颜色色值：透明度：遮罩层，左栏*/
				background: rgba(243, 35, 134, 5);
			}
				/*最大宽度与最小宽度*/
				div#container{
					background: #f0f0f0;
				}
				div.box{
					background: #ff0e42;
					 color:#fff;
					 width: 80%;
					 /*最小宽度：设定，不能改变，移动端*/
					 min-width: 500px;
					 /*最大宽度，设定，宽度最大上限600px，移动端*/
					 max-width: 650px;
					 /*页面设定最大与最小宽高，约定 移动端宽高比.页面错乱*/
				}
		</style>
	</head>
	<body>
		<div id="d1"></div>
		<!-- 最大宽度与最小宽度 ： 自适应 ： 编写页面在任何浏览器下正常显示 -->
		<div id="container">
			<div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos reiciendis expedita nesciunt laudantium consequuntur fugiat assumenda exercitationem, quam asperiores ipsam iste maiores a voluptas mollitia! Voluptatum excepturi corrupti odio eligendi.</div>
		</div>
	</body>
</html>